<script setup>
//获取用户信息
import httpInstance from "@/axios/index";

import {onMounted, ref} from "vue";
import {Plus, Refresh} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";

const subType = ref("")
const fromData = ref({
  id: -1,
  roleName: "",
  remarks: ""
})
const tableData = ref()
let timer
const dialog = ref(false)
const loading = ref(false)
const fangXiang = ref("ltr")

//分页信息
const page = ref({
  pageNo: 1,
  pageSize: 5,
  pageTotal: 0
})
const pageSize = ref([5, 10, 15, 20])

//获取信息
const getRoleInfo = () => {
  //拼接请求地址
  let url = "/role/getRoleList?pageNo=" + page.value.pageNo + "&pageSize=" + page.value.pageSize
  httpInstance.get(url).then(responseData => {
    if (responseData.code === 200) {
      tableData.value = responseData.data
      page.value.pageNo = responseData.data.current

      page.value.pageTotal = responseData.data.total
    }
  })
}

//根据id获取角色组信息
const getRoleById = (id) => {
  httpInstance.get('/role/getRoleById?id=' + id).then(responseData => {
    fromData.value.id = responseData.data.id
    fromData.value.roleName = responseData.data.roleName
    fromData.value.remarks = responseData.data.remarks
  })
}

//删除数据
const deleteInfo = (id) => {
  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    httpInstance.delete('/role/deleteRole?id=' + id).then(responseData => {
      if (responseData.code === 200) {
        ElMessage.success('删除成功')
        getRoleInfo()
      }
    })
  }).catch(() => {

  })
}

//新增数据
const insertInfo = () => {
  httpInstance.post('/role/addRole', qs.stringify(fromData.value)).then(responseData => {
    if (responseData.code === 200) {
      ElMessage.success('新增成功')
      getRoleInfo()
      handleClose()
    }
  }).catch(() => {

  })
}

//修改数据
const updateInfo = () => {
  httpInstance.put('/role/updateRole', qs.stringify(fromData.value)).then(responseData => {
    if (responseData.code === 200) {
      ElMessage.success('修改成功')
      getRoleInfo()
      handleClose()
    }
  }).catch(() => {

  })
}

const handleClose = (done) => {
  if (loading.value) {
    return
  }
  dialog.value = false
  fromData.value.roleName = ""
  fromData.value.remarks = ""
}

//数据操作
const onClick = () => {
  if (subType.value === "Insert") {
    insertInfo()
  } else {
    updateInfo()
  }
}

onMounted(getRoleInfo)
</script>

<template>
  <el-row>
    <el-drawer
        v-model="dialog"
        title="数据操作"
        :direction="fangXiang"
        :before-close="handleClose"
        class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form
            label-position="top"
            label-width="auto"
            :model="fromData"
            style="max-width: 600px"
        >
          <el-form-item label="角色组名称">
            <el-input
                v-model="fromData.roleName"
                style="max-width: 600px"
            >
              <template #prepend>角色组名称</template>
            </el-input>
          </el-form-item>
          <el-form-item label="角色组备注">
            <el-input
                v-model="fromData.remarks"
                style="max-width: 600px"
            >
              <template #prepend>角色组备注</template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">清空</el-button>
          <el-button type="primary" :loading="loading" @click="onClick">
            {{ loading ? '提交中...' : '提交' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
    <el-col :span="24">
      <el-row>
        <el-col :span="24">
          <el-card>
            <div slot="header" class="clearfix">

            </div>
            <div>
              <el-button color="#409EFF" style="color: white">
                <el-icon>
                  <Search/>
                </el-icon>
                <span>搜索</span>
              </el-button>
              <el-button color="#fff" dark="dark">
                <el-icon>
                  <Refresh/>
                </el-icon>
                <span>重置</span>
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="display: flex;
                                align-items: center;
                                justify-content: space-between;
                                width: 100%;">
                    <el-button color="#409EFF" style="color: white" @click="dialog = true;fangXiang = 'ltr';subType = 'Insert';">
                      <el-icon><Plus/></el-icon>
                      <span>新增</span>
                    </el-button>
                  </span>
            </div>
            <div class="text item">
              <el-table :data="tableData?.records" height="360px" style="width: 100%;min-height: 340px" border>
                <el-table-column prop="id" label="id" width="50" header-align="center" align="center"/>
                <el-table-column prop="roleName" label="角色名称" width="100" header-align="center" align="center"/>
                <el-table-column label="拥有权限" width="80" header-align="center" align="center">
                  <template #default="info">
                    <el-button type="primary" size="small" v-bind:disabled="info.row.isSuper == 1">授权</el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="isSuper" label="是否超级管理" width="120" header-align="center" align="center"/>
                <el-table-column prop="remarks" label="备注信息" header-align="center" align="center"/>
                <el-table-column fixed="right" label="操作" min-width="160" width="160" header-align="center" align="center">
                  <template #default="info">
                    <div style="display: flex;">
                      <el-button size="small" color="#019768"
                                 @click="getRoleById(info.row.id);dialog = true;subType = 'Update';fangXiang = 'rtl';fromData.id = info.row.id">
                        <el-icon>
                          <Plus/>
                        </el-icon>
                        <span>修改</span>
                      </el-button>
                      <el-button size="small" color="#F43D5E" v-bind:disabled="info.row.isSuper == 1" @click="deleteInfo(info.row.id)">
                        <el-icon>
                          <Plus/>
                        </el-icon>
                        <span>删除</span>
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div slot="footer" class="card-footer">
              <el-pagination
                  v-model:current-page="page.pageNo"
                  v-model:page-size="page.pageSize"
                  :page-sizes="pageSize"
                  background
                  layout="sizes, prev, pager, next"
                  :total="page.pageTotal"
                  @size-change="getRoleInfo"
                  @current-change="getRoleInfo"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<style scoped>

.card-footer {
  display: flex;
  justify-content: flex-end;
}

.el-card {
  margin: 10px;
}

.NoData {
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  color: #a5a5a5
}
</style>